Web log de Serge Boisse
On line depuis 1992 !
Auteur : Serge Boisse
Voir aussi: mettre ici des liens entre vers des sujets voisins
Ce plugin permet d'inclure des composants javascript React dans les notes Obsidian. Et donc peut-être de transformer Obsidian en un notebook js comme notebookjs (page web) ou Dev tool The Lab (page web)
Voir React (js) pour la syntaxe jsx
Il faut définir (en principe) deux variables dans le frontmatter
defines-react-components: true
react-components-namespace: projects.test (optionnel)
Il est aussi possible de considérer une note comme un composant. Pour cela les notes doivent être dans le répertoire (paramètrable) JS/ComposantsReact
Le contenu du fichier de composant est implicitement enveloppé dans props=>{...}. Cela signifie que vous n'avez pas à écrire vous-même la signature de la fonction. Vous devez cependant inclure le mot-clé return dans votre code.
The react components have access to everything inside the global namespace.
Besides this, the components have access to React, ReactDOM, useState, and useEffect. This allows you to easily write functional components.
const ctx = useContext(ReactComponentContext);
var frontmatter = ctx.markdownPostProcessorContext.frontmatter;
return <h4>{frontmatter.Date}</h4>
Cliquer juste en dessous de cette ligne en mode édition pour voir l'appel
jsx:<Exemple1/>
OK mais erreur ?
## Exemples
***
Hello
```jsx:component:MyComponent
return <div style={{color: "#f80"}}>Hello {props.name}!</div>
cliquer juste en dessous de cette phrase en mode édition pour voir le code d'appel :
jsx:<MyComponent name={"Serge"}/>
jsx:<MyComponent name={"Toto"}/>
Counter(lien privé)
jsx:<Counter source={"clic"} />marche en mode édition et live
return(
<div style=
{{color: "#0f0"}}>
<markdown src={props.src}/>
</div>)
Usage
markdown en vert ?
* a
* b
Marche pas non plus ?
Définition d'une fonction :
function add(a, b) {
return a+b;
}
return { add };
Usage:
const {add} = utils();
<div>The sum of 1 and 2 is {add(1,2)}</div>
OK
Compteur :
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
appel ???? marche pas
jsx:<Compteur>
dd
Commentaires (0) :
Page :Ajouter un commentaire (pas besoin de s'enregistrer)
En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.